import React, { Component } from "react";

class Child extends Component {
  state = {
    count: 10,
    prevCount: 0,
  };

  // getDerivedStateFromProps,根据props的值去生成一个新的state
  // 必须要有state，加上static关键字，返回对象或者null
  static getDerivedStateFromProps(nextProps, nextState) {
    // console.log("getDerivedStateFromProps");
    // 这里返回的对象会和state对象做合并
    // return {
    //   count: nextProps.num,
    // };

    // 1. nextProps.num: 20 nextState.prevCount: 0 -> count: 20 prevCount: 20
    // 2. nextProps.num: 40 nextState.prevCount: 20 -> count: 40 prevCount: 40
    // 3. nextProps.num: 40 nextState.prevCount: 40 -> null
    if (nextProps.num === nextState.prevCount) {
      return null;
    } else {
      return {
        count: nextProps.num,
        prevCount: nextProps.num,
      };
    }
  }

  render() {
    return <div>child组件 - {this.state.count}</div>;
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        count: 80,
      });
    }, 4000);
  }

  // getSnapshotBeforeUpdate在更新之前获得一个快照(记录)
  // 必须和componentDidUpdate一起用，返回一个值或者null
  // 要在更新dom之前去获得一个值给更新完dom以后用
  // 这个值只能是跟ui渲染(css的属性值)有关的值
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    return 5;
  }

  // 可以接收第三个参数是快照
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate");
    console.log(snapshot);
  }
}

export default Child;
